<script setup>
import { ref, reactive } from 'vue'
import TopLeft from './topLeft.vue'
import TopMiddle from './topMiddle.vue'
import TopRight from './topRight.vue'
import bottomLeft from './bottomLeft.vue'
import bottomRight from './bottomRight.vue'
const campusOpt = ['李沧校区', '平度校区', '莱西校区']
const campusVal = ref('李沧校区')
</script>

<template>
  <div class="home-wrapper">
    <div class="title-select">
      <span
        style="
          display: inline-block;
          margin-right: 15px;
          font-family:'PMZDR';
          font-size: 30px;
          font-weight: bold;
          font-style: oblique;
        "
        >切换校区</span
      >
      <el-select v-model="campusVal" placeholder="请选择校区" style="width: 120px">
        <el-option v-for="item in campusOpt" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div class="home-top">
      <TopLeft></TopLeft>
      <TopMiddle></TopMiddle>
      <TopRight></TopRight>
    </div>
    <div class="home-bottom">
      <bottomLeft></bottomLeft>
      <bottomRight></bottomRight>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background: url('@/assets/image/common/动态背景图.gif') no-repeat center/cover;
  .title-select {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: right;
    padding-right: 20px;
    margin-bottom: 5px;
  }
  .home-top {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .home-bottom {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
